<template>
  <div class="designer-sidebar">
    <div class="designer-toolbox">
      <div
        class="tool-item"
        v-for="item in nodeTypes"
        :key="item.type"
        draggable="true"
        @dragstart="onDragStart(item, $event)"
      >
        <span :style="{background: item.color}" class="tool-icon"></span>
        {{ item.label }}
      </div>
    </div>
  </div>
</template>

<script setup>
defineProps({
  nodeTypes: {
    type: Array,
    default: () => []
  }
})

const emit = defineEmits(['dragstart'])

const onDragStart = (item, event) => {
  emit('dragstart', item, event)
}
</script>

<style scoped>
.designer-sidebar {
  width: 120px;
  background: #f5f5f5;
  border-right: 1px solid #eee;
  padding: 16px 0;
}

.designer-toolbox {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tool-item {
  display: flex;
  align-items: center;
  cursor: grab;
  padding: 8px 12px;
  background: #fff;
  border-radius: 4px;
  border: 1px solid #e0e0e0;
  user-select: none;
}

.tool-icon {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  margin-right: 8px;
}

/* 夜间主题适配 */
#htmlRoot[data-theme='dark'] .designer-sidebar {
  background: #1f1f1f;
  border-right-color: #333;
}

#htmlRoot[data-theme='dark'] .tool-item {
  background: #2d2d2d;
  border-color: #444;
  color: #e0e0e0;
}

#htmlRoot[data-theme='dark'] .tool-item:hover {
  background: #3a3a3a;
  border-color: #555;
}
</style>

